<template>
  <div class="app-container">
    <el-row>
      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header"><span>宿舍成员</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <thead>
                <tr>
                  <th class="el-table__cell is-leaf"><div class="cell">姓名</div></th>
                 
                  <th class="el-table__cell is-leaf"><div class="cell">职务</div></th>
                  <th class="el-table__cell is-leaf"><div class="cell">专业</div></th>
                  <th class="el-table__cell is-leaf"><div class="cell">床号</div></th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">吴xx</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" >舍长</div></td>
                   <td class="el-table__cell is-leaf"><div class="cell" >软工194</div></td>
                   <td class="el-table__cell is-leaf"><div class="cell" >2号床</div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">吴xx</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" >舍员</div></td>

                  <td class="el-table__cell is-leaf"><div class="cell" >软工194</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" >1号床</div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">吴xx</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" >舍员</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" >软工194</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" >3号床</div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">吴xx</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" >舍员</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" >软工194</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" >4号床</div></td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12" class="card-box">
        <el-card>
          <div slot="header"><span>费用</span></div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <thead>
                <tr>
                  <th class="el-table__cell is-leaf"><div class="cell">费用类型</div></th>
                  <th class="el-table__cell is-leaf"><div class="cell">剩余费用</div></th>
                  <th class="el-table__cell is-leaf"><div class="cell">使用费用</div></th>
                  <th class="el-table__cell is-leaf"><div class="cell">缴费</div></th>

                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">水费</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" >120元</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" >110元</div></td>
                  <td class="el-table__cell is-leaf"><a class="cell">缴费</a></td>

                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">电费</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" >120元</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" >120元</div></td>
                  <td class="el-table__cell is-leaf"><a class="cell">缴费</a></td>

                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">物业费</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" >120元</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" >120元</div></td>
                  <td class="el-table__cell is-leaf"><a class="cell">缴费</a></td>

                </tr>
              
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>

      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header">
            <span>宿舍财产</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <tbody>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">空调</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" >1台</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">桌椅</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" >4个</div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">窗户</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" >1扇</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">床铺</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" >2床</div></td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf"><div class="cell">水池</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" >一个</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell">马桶</div></td>
                  <td class="el-table__cell is-leaf"><div class="cell" >1个</div></td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>

     

     
    </el-row>
  </div>
</template>

<script>

export default {
  name: "Server",
  data() {
    return {
      // 服务器信息
      server: []
    };
  },
  created() {
 
  },
  methods: {
    /** 查询服务器信息 */
    getList() {
     
    },
    // 打开加载层
    openLoading() {
      this.$modal.loading("正在加载服务监控数据，请稍候！");
    }
  }
};
</script>